<!--
  @Description: In User Settings Edi
thor: your name
 * @Da : 2019-09-26 15:10:33
</div> * @LastEdi
tTime: 2019-09-26 15:10:33
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  用户列表
      </div>
      <div class="container_body">
        <div class="btn_add"><el-button type="primary" @click="add_users">
          添加用户</el-button>
        </div>
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="username"
              label="用户名"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              sortable
              label="手机号"
            />
            <el-table-column
              prop="role_name"
              sortable
              label="角色名称"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small">查看权限</el-button>
                <el-button type="text" size="small" @click="save_users(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.$api.get_user_list([]).then(res => {
      console.log(res)
      this.tableData = res.data
    })
  },
  methods: {
    add_users() {
      this.$router.push({
        path: '/users/add'
      })
    },
    save_users(id) {
      this.$router.push({
        path: '/users/add',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style scoped>
  .btn_add{
    margin-bottom: 40px;
  }
</style>
